<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="lib/vue.js"></script>-->
</head>
<body>
<div id="app">
    <input type="text"  placeholder="请内容">
    <input type="text" v-focus v-color="color" placeholder="请文字内容"><br>
    <my-red>搜索条件：</my-red><input type="text">
</div>
<!--<input type="text" v-focus="focus" placeholder="请文字内容">-->
<!--<input type="text" placeholder="请文字内容">-->


</body>

<script src="lib/vue.js"></script>
<script>
    Vue.directive("focus",{
        inserted:function (el) {
            el.focus()
        }
    })
    Vue.directive("color",function () {
        // this.vm.color=this.expression
        // this.el.style.color=this.vm[this.expression]
        this.el.style.color="red"
    })
    Vue.elementDirective("my-red",{
        bind:function () {
            this.el.style.color="red"
        }
    })

    var vm = new Vue({
        el:"#app",
        data:{
            color:"red"
        },
        methods:{

        }
    })
</script>
</html>